<script setup>
const props = defineProps(['menuWidth'])
const emit = defineEmits(['change-menu-width'])
</script>
<template>
    <div class="aside">
         <div class="menu_top">
          <img class="homeLogo" src="@/assets/images/logo.png" alt="" />
          <span>
            <el-icon v-if="menuWidth == '60px'" @click="emit('change-menu-width', '200px')"
              ><Expand
            /></el-icon>
            <el-icon v-else @click="emit('change-menu-width', '60px')"><Fold /></el-icon>
          </span>
        </div>
        <div class="svg" :style="{width:menuWidth=='60px'?'42px':'182px'}">
          <img src="@/assets/images/indexSide.png" alt="" />
        </div>
        <div class="infoList" v-if="menuWidth=='60px'">
          <ul>
            <li>
                <img class="author tac" src="https://picsum.photos/200/200" alt="" />
            </li>
            <li>
                <img class="author tac" src="https://picsum.photos/200/200" alt="" />
            </li>
            <li>
                <img class="author tac" src="https://picsum.photos/200/200" alt="" />
            </li>
          </ul>
          </div>
          <div class="infoList2" v-else>
          <ul>
            <li>
                <img class="author" src="https://picsum.photos/200/200" alt="" />
                <span>你的朋友-苏格拉底</span>
            </li>
            <li>
                <img class="author" src="https://picsum.photos/200/200" alt="" />
                <span>你的朋友-爱因斯坦</span>
            </li>
            <li>
                <img class="author" src="https://picsum.photos/200/200" alt="" />
                <span>你的朋友-孔子</span>
            </li>
          </ul>
        </div>
       </div>
</template>
<style scoped>
.homeLogo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #fff;
}
.menu_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 5px;
}
.svg {
  height: 24px;
  text-align: center;
  background-color: #fff;
  margin: 20px auto;
  border-radius: 5px;
}
.svg img {
  width: 20px;
  height: 20px;
}
.infoList {
  width: 100%;
  text-align: center;
}
.author {
  width: 30px;
  height: 30px;
  margin: 10px 0;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #fff;
}
.infoList ul li {
    display: flex;
    justify-content: start;
    align-items: center;
}
.infoList2 ul {
  margin: 0;
  padding: 0;
  list-style: none; 
}
.infoList2 ul li {
  display: flex;
  align-items: center; 
  justify-content: flex-start; 
  gap:6px;
  line-height: 1; 
  padding: 8px 0; 
}
.tac {
    margin: 10px auto;
}
</style>
